<template>
	<view>
		<global-contact></global-contact>
		<!-- 场地详情 -->
		<view class="swiper">
			<u-swiper :list="banner" @change="changePage" :autoplay="true" height="400rpx" imgMode="aspectFill"
				showTitle keyName="image" :circular="true" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ banner.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 轮播图下面的信息 -->
		<view class="info" v-if="details">
			<view class="collect">
				<view class="left">
					<view class="title">{{ details.title }}</view>
					<view class="rate">
						<text>星级标准：</text>
						<!-- #ifdef MP-WEIXIN -->
						<van-rate count="5" :value="details.star" size="16" color="#FFA501" void-icon="star"
							void-color="#E2E2E2" readonly />
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<uni-rate :size="16" :value="details.star" />
						<!-- #endif -->

					</view>
				</view>
				<view class="right" @click="collected">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/nolike.png" mode=""></image>
					<text>收藏</text>
				</view>
			</view>
			<!-- 客房 -->
			<view class="system">
				<view class="item">
					<text>客房</text>
					<text>{{ details.guest_room || 0 }}间</text>
				</view>
				<u-line direction="col" length="65rpx" margin="0 12rpx 0 14rpx;" color="#888888"></u-line>
				<view class="item">
					<text>餐饮</text>
					<text>{{ details.catering || 0 }}位</text>
				</view>
				<u-line direction="col" length="65rpx" margin="0 12rpx 0 14rpx;" color="#888888"></u-line>
				<view class="item">
					<text>会场</text>
					<text>{{ details.venue || 0 }}个</text>
				</view>
				<u-line direction="col" length="65rpx" margin="0 12rpx 0 14rpx;" color="#888888"></u-line>
				<view class="item">
					<text>服务</text>
					<!-- <text>{{ Object.keys(details.assort_list.pst).length || 0 }}</text> -->
				</view>
				<u-line direction="col" length="65rpx" margin="0 12rpx 0 14rpx;" color="#888888"></u-line>
				<view class="item">
					<text>团建</text>
					<text>{{ details.party || 0 }}</text>
				</view>
			</view>
			<view class="number">场地编号：{{ details.place_number || '暂无' }}</view>
			<view class="address">详细地址：{{ details.address || '暂无' }}</view>
			<view class="path">
				<view class="tip">最大会场：<text>{{ details.venue_num || 0 }}人</text></view>
				<view class="tip">最大餐饮：<text>{{ details.catering_num || 0 }}人</text></view>
				<view class="tip">最大住宿：<text>{{ details.guest_num || 0 }}人</text></view>
			</view>
			<view v-if="details && details.features" class="special">
				<view class="tit">场地特色：</view>
				<view :class="moreInfo ? 'cont' : 'cont dis'">
					<text v-for="(item, index) in details.features.split(',')" :key="index">{{ item }}</text>
				</view>
				<text class="more" @click="showMore">{{ moreInfo ? '收起' : '更多' }}</text>
			</view>
		</view>
		<!-- 立即填写 -->
		<view class="write" v-if="logStatus">
			<view class="text">一键生成智能报价单</view>
			<view class="btn">立即填写</view>
		</view>
		<view class="table" v-if="logStatus">
			<view class="ul" v-if="details">
				<view class="li" v-for="(items, indexs) in details.costList" :key="indexs">
					<!-- <view class="title">{{items.text}}</view> -->
					<view class="navList" v-if="indexs == 0">
						<text style="width: 52rpx;border-right: 1px solid #FFFFFF;">序号</text>
						<!-- <text>分类</text> -->
						<text
							style="position: relative;right: 25rpx;width: 150rpx;border-right: 1px solid #FFFFFF;">项目</text>
						<text style="width: 90rpx;border-right: 1px solid #FFFFFF;">单价</text>
						<text style="width: 160rpx;border-right: 1px solid #FFFFFF;">数量</text>
						<text style="border-right: 1px solid #FFFFFF;width: 130rpx;">天/次/场</text>
						<text style="width: 104rpx;">合计</text>
					</view>
					<block v-for="(items1, indexs1) in items.child" :key="indexs1">
						<view class="item" style="border: 1px solid #CCCCCC;">
							<view class="tip" style="width: 50rpx;"><text class="tit" style="line-height: 66rpx;">{{
								indexs1 == 0 ? (indexs + 1) : '' }}</text></view>
							<!-- <view class="tip"><text class="tit">{{items.text}}</text></view> -->
							<view class="tip"
								style="width: 138rpx;border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;">
								<text class="tit" style="height: 100%;"><text
										style="height: 100%;display: flex;align-items: center;width: 119rpx;">{{
											items1.text }}</text></text>
							</view>
							<view class="tip" style="width: 120rpx;"><text class="center">{{ parseInt(items1.price) }}{{
								items1.price_unit }}</text></view>
							<view class="tip"
								style="width: 160rpx;border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;">
								<u-number-box @change="changeNum" v-model="items1.number_between" :min="0">
								</u-number-box>
							</view>
							<view class="tip" style="width: 138rpx;border-right: 1px solid #CCCCCC;">
								<u-number-box @change="changeNum" v-model="items1.day_between" :min="0"></u-number-box>
							</view>
							<view class="tip" style="width: 104rpx;line-height: 66rpx;">
								{{ cont(items1.price, items1.number_between, items1.day_between) }}
							</view>
						</view>
						<view class="" style="border: 1px solid #CCCCCC;" v-if="items.descr">{{ items.descr }}</view>
					</block>
				</view>
			</view>
			<view class="" style="text-align: right;padding-right: 20rpx;border: 1px solid #CCCCCC;">
				合计：{{ getTotal }}
			</view>
		</view>

		<!-- 产品 -->
		<view class="content" v-if="details">
			<!-- #ifdef MP-WEIXIN -->
			<scroll-view scroll-x="true" :scroll-into-view="navType" :scroll-with-animation="true"
				style="height: 102rpx;" class="sticky">
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<scroll-view scroll-x="true" :scroll-into-view="navType" :scroll-with-animation="true"
					style="height: 102rpx;" class="sticky stickyH5">
					<!-- #endif -->
					<view class="wraps">
						<view :id="'v' + index" :class="navIndex == index ? 'item active' : 'item'"
							v-for="(item, index) in navList" :key="index" @click="navClick(index)">
							<text>{{ item.text }}</text>
							<view class="line"></view>
						</view>
					</view>
				</scroll-view>
				<!-- 团建产品 -->
				<view class="items1" id="g1" v-if="details.pruduct_list && details.pruduct_list.length > 0">
					<view class="titleName">
						<image src="https://www.atuanjian.com/appletStatic/static/detail/t10.png" mode="aspectFit">
						</image>
					</view>
					<scroll-view scroll-x="true" style="height: 390rpx;">
						<view class="wrap">
							<view class="item" v-for="(item, index) in details.pruduct_list" :key="index"
								@click="productDetail(item)">
								<view class="img">
									<image :src="showImg + item.img" mode="aspectFill"></image>
									<text>{{ item.catname || '' }}</text>
								</view>
								<view class="goods_tit">{{ item.title || '' }}</view>
								<view class="notice">
									<text>{{ item.day_num || 0 }}</text>
									<u-line direction="col" length="20rpx" margin="0 6rpx 0 8rpx"></u-line>
									<text>{{ item.people_num || 0 }}人</text>
								</view>
								<view class="price">
									<text>{{ item.people_price || 0 }}</text>元起
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 场地介绍 -->
				<view class="items2" id="g2">
					<view class="titleName">
						<image src="https://www.atuanjian.com/appletStatic/static/detail/t11.png" mode="aspectFit">
						</image>
					</view>
					<view class="contain">
						<!-- <rich-text :nodes="details.details"></rich-text> -->
						<mp-html :content="details.details" />
					</view>
				</view>
				<!-- 配套设施 -->
				<view class="items2">
					<view class="items2-cc" v-for="(item, index) in details.assort_list" :key="item.id">
						<block v-for="(i, index_1) in item.get_place_serve" :key="i.id">
							<image :src="i.img_arr ? showImg + i.img_arr[0] : ''" class="item2-img" v-if="i.img_arr[0]"
								@click="navigator(item,i)" />
							<view class="items2-title">{{ i.title }}</view>
							<view class="item2-tip">￥{{ i.place_serve_type_list_item[6].price || '0' }}
								面积：{{ i.place_serve_type_list_item[6].area || '' }} 床型：
								{{ i.place_serve_type_list_item[6].bed_type || '' }}
								房间总数：{{ i.place_serve_type_list_item[6].count || '' }}
								{{ i.place_serve_type_list_item[6].window || '' }} 卫浴
								{{ i.place_serve_type_list_item[6].bathroom || '无' }}</view>
						</block>

					</view>
				</view>
				<!-- 周边信息 -->
				<view class="items2" id="g3">
					<view class="titleName">
						<image src="https://www.atuanjian.com/appletStatic/static/detail/t8.png" mode="aspectFit">
						</image>
					</view>
					<view class="aside">
						<view class="nav_head">
							<view @click="clickAside(0)" :class="['nav_title', { 'current': AsideIndex == 0 }]">景点信息
							</view>
							<view @click="clickAside(1)" :class="['nav_title', { 'current': AsideIndex == 1 }]">周边信息
							</view>
						</view>
						<view class="items" v-if="AsideIndex == 0 && details.attractions_list.length > 0">
							<!-- <text class="titName">景点信息</text> -->
							<view class="address" v-for="(item, index) in details.attractions_list" :key="index"
								@click="refreshPage(item.id)">
								<text>{{ item.title }}</text>
								<!-- <image src="https://www.atuanjian.com/appletStatic/static/detail/arrow.png" mode=""></image> -->
							</view>
						</view>
						<view class="items" v-else-if="AsideIndex == 1 && details.surrounding_list.length > 0">
							<!-- <text class="titName">周边信息</text> -->
							<view class="address" v-for="(item, index) in details.surrounding_list" :key="index"
								@click="refreshPage(item.id)">
								<text>{{ item.title }}</text>
								<!-- <image src="https://www.atuanjian.com/appletStatic/static/detail/arrow.png" mode=""></image> -->
							</view>
						</view>
						<u-empty v-else mode="data" :text="uEmptyText"
							icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
				</view>
				<!-- 预定须知 -->
				<view class="items2" id="g4">
					<view class="titleName">
						<image src="https://www.atuanjian.com/appletStatic/static/detail/t6.png" mode="aspectFit">
						</image>
					</view>
					<view class="subTit">预约信息</view>
					<view class="need">
						<rich-text :nodes="details.information"></rich-text>
					</view>
					<view class="subTit" style="margin-top: 24rpx;">预定说明</view>
					<view class="need">
						<rich-text :nodes="details.book_description"></rich-text>
					</view>
				</view>
				<!-- 用户评价 -->
				<view class="items2" id="g5">
					<view class="titleName">
						<image src="https://www.atuanjian.com/appletStatic/static/detail/t9.png" mode="aspectFit">
						</image>
					</view>
					<view class="wraps" style="margin-bottom: 10rpx;">
						<view :class="rateIndex == 0 ? 'item active' : 'item'" @click="rateIndexClick(0)">
							<text>用户评价</text>
							<view class="line"></view>
						</view>
						<view :class="rateIndex == 1 ? 'item active' : 'item'" @click="rateIndexClick(1)">
							<text>发表评价</text>
							<view class="line"></view>
						</view>
					</view>
					<block v-if="rateIndex == 0">
						<view class="talkList" v-for="(item, index) in talkList" :key="index">
							<image class="photo"
								style="width: 100rpx;height: 100rpx;margin-right: 10rpx;border-radius: 50%;"
								:src="item.user.wx_user.avatarUrl" mode=""></image>
							<view class="talkContent">
								<view class="user_name">
									<text>{{ item.user.wx_user.nickName }}</text>
									<text>{{ item.created_at || '--' }}</text>
								</view>
								<view class="">{{ item.content || '--' }}</view>
								<view class="talk_img_list" v-if="item.img_arr.length > 0">
									<image v-for="(obj, i) in item.img_arr" :key="i" :src="showImg + obj"
										mode="aspectFill"></image>
									<!-- <image src="https://www.atuanjian.com/appletStatic/static/f2.png" mode="aspectFill"></image> -->
								</view>
							</view>
						</view>
					</block>
					<block v-if="rateIndex == 1">
						<view class="valute">
							<view class="item" v-for="(item, index) in rateList" :key="index"
								@click="valuteClick(item, index)">
								<text>{{ item.text }}</text>
								<image
									:src="item.check == true ? 'https://www.atuanjian.com/appletStatic/static/detail/selected.png' : 'https://www.atuanjian.com/appletStatic/static/detail/unselect.png'"
									mode=""></image>
							</view>
						</view>
						<view class="valuteContent">
							<u--textarea v-model="productValue" height="200" autoHeight maxlength="500" count
								placeholder="请对我们的产品进行评价">
							</u--textarea>
							<view class="upload">
								<!-- #ifdef MP-WEIXIN -->
								<van-uploader :file-list="fileList" :deletable="true" :multiple="true" max-count="9"
									@after-read="afterRead" @delete="delImg" />
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<uni-file-picker v-model="fileList" file-mediatype="image" mode="grid" :limit="9"
									@select="afterRead" @delete="delImg"></uni-file-picker>
								<!-- #endif -->


							</view>

						</view>
						<view class="submit" @click="submit" v-if="!isSubmit">提交</view>
					</block>

				</view>
				<!--以下客户在此场地  -->
				<view class="items2" id="g6" v-if="kh_onOff == 1">
					<view class="titleName">
						<text class="cd_small"></text>
						<text class="cd_big"></text>
						<text class="cd_text">以下客户在此场地</text>
						<text class="cd_big"></text>
						<text class="cd_small"></text>
					</view>
					<view class="cd_content">
						<navigator v-for="(item, index) in khArr" :key="item.id" class="cd_listBox"
							@click="toDetail(item)">
							<image :src="showImg + item.img" mode=""></image>
							<view class="cd_listBox_text">
								<view class="cd_listBox_textTitle">
									{{ item.company_name }}
								</view>
								<view class="cd_listBox_cont">
									{{ item.abstract }}
								</view>
							</view>
						</navigator>
					</view>
				</view>
		</view>
		<!-- 新加相关视频 -->
		<block
			v-if="JSON.stringify(details.associated) != '[]' && details.associated.video && details.associated.video.length > 0">
			<view class="aboutVideo">
				<view class="aboutCate">相关视频</view>
				<view class="about_item" style="position: relative;" v-for="(item, index) in details.associated.video"
					:key="index" @click="viewVideo(item)">
					<image mode="aspectFill" :src="showImg + item.img"></image>
					<view class="about_txt">{{ item.title }}</view>
					<image
						style="width: 92rpx;height: 92rpx;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: 999;"
						src="https://www.atuanjian.com/appletStatic/static/play.png" mode="aspectFill"></image>
				</view>
			</view>
		</block>

		<!-- 底部 -->
		<!-- <view class="footer">
			<view class="wrap_box">
				<view class="item" @click="toIndex()">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i1.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="item">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i2.png" mode=""></image>
					<text>在线客服</text>
					<button type="default" open-type="contact"></button>
				</view>
				<view class="item" @click="makeCall">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i3.png" mode=""></image>
					<text>立即致电</text>
				</view>
				<view class="item" style="position: relative;">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i4.png" mode=""></image>
					<text>立即分享</text>
					<button type="default" open-type="share"></button>
				</view>
				<view class="submit" @click="orderSource">立即预定</view>
			</view>
		</view> -->
		<view class="footer">
			<view class="wrap_box">
				<view class="item" @click="toIndex()">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i1.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="item">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i2.png" mode=""></image>
					<text>客服</text>
					<button type="default" open-type="contact"></button>
				</view>
				<!-- 		<view class="item" @click="makeCall">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i3.png" mode=""></image>
					<text>立即致电</text>
				</view>
				<view class="item" @click="shareData">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i4.png" mode=""></image>
					<text>立即分享</text>
				</view> -->
				<view class="item" @click="handleNavCar">
					<image src="https://www.atuanjian.com/appletStatic/static/images/u-21.png" mode=""></image>
					<text>购物车</text>
				</view>
				<!-- <view class="submit" @click="orderSource">立即预定</view> -->
				<view class="btn-box">
					<view class="btn-box-1" @click="handleCar">加入购物车</view>
					<view class="btn-box-1" style="background-color: #FFBB50;" @click="handleShop">立即购物</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="shareItem">
						<text class="txt">截止时间：</text>
						<input type="text" :value="inputTime" placeholder="请选择截止时间" disabled="" @click="selectTime" />
					</view>
					<view class="shareItem">
						<text class="txt">备 注：</text>
						<u--input placeholder="请输入备注内容" border="surround" v-model="noticeVal"></u--input>
					</view>
					<view class="shareItem overBtn">
						<u-button text="取消" @click="cancelOver"></u-button>
						<u-button text="确定" type="primary" @click="sureOver"></u-button>
					</view>

				</view>
			</view>
		</u-overlay>
		<u-datetime-picker ref="datetimePicker" :show="show2" v-model="endTime" mode="datetime" @confirm="confirm"
			@cancel="cancel" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
import {
	getplaceDetail,
	productSharedata,
	addCollection,
	addComent,
	siteSetting,
	getTalk,
	addCard
} from '@/utils/request.js'
// var bmap = require('../../libs/bmap-wx.min.js');  
var wxMarkerData = [];
export default {
	data() {
		return {
			product_type:6,
			rateIndex: 0,
			productValue: '',
			AsideIndex: 0,
			detailId: '',
			logStatus: false,
			show: false,
			noticeVal: '', //备注
			show2: false,
			endTime: Number(new Date()), //时间
			inputTime: '',
			values: 1,
			end_date: '',

			moreInfo: false,
			showImg: '',
			currentNum: 0,
			banner: [],
			rateValue: 3,
			navIndex: 0,
			navList: [{
				text: '团建产品'
			}, {
				text: '场地介绍'
			}, {
				text: '周边信息'
			}, {
				text: '预定须知'
			}, {
				text: '用户评价'
			},],

			covers: [],
			// 
			rateList: [

			],
			value: '',
			fileList: [],
			fileImg: [],
			// 中间nav 
			navType: 'v0',
			g1: 0,
			g2: 0,
			g3: 0,
			g4: 0,
			g5: 0,
			g6: 0,
			// g6:0,
			details: {
				associated: {
					video: []
				},
				assort_list: {
					pst: {

					}
				},
				features: '',
				attractions_list: [],
				surrounding_list: []
			},

			// UrgkFGn8G2pDxoH9Cj6cEP6WMIeGZ7cm 
			// markers: [], 
			longitude: '',
			latitude: '',
			rgcData: {},
			markers: [

			],
			qqLocal: [],
			// 以下客户在此场地
			khArr: [],
			kh_onOff: 1,
			// showImg:'',
			isSubmit: false,
			// score_option:''

			scores: '',
			userInfo: null,
			talkList: [],
			uEmptyText: '数据加载中...',
		}
	},
	onReady() {
		// 微信小程序需要用此写法
		// #ifdef MP-WEIXIN
		this.$refs.datetimePicker.setFormatter(this.formatter)
		// #endif
	},
	computed: {
		getTotal() {
			let total = 0

			return total;
		}
	},
	components: {
		mpHtml
	},
	methods: {
		changePage(e) {
			this.currentNum = e.current
		},
		handleNavCar() {
			uni.navigateTo({
				url: '/pagesB/shopCar/shopCar'
			})
		},
		async addCard(data) {
			return await addCard(data)
		},
		rateIndexClick(val) {
			this.rateIndex = val
			if (val == 0) {
				let param = {
					url: '/place/' + this.detailId,
					p: 0,
					n: 20
				}
				this.getTalk(param).then(result => {
					console.log('result', result)
					if (result.list && result.list.length > 0) {
						this.talkList = result.list
					}
				}).catch(error => {
					console.log('error', error)
				})
			}
		},
		clickAside(val) {
			this.AsideIndex = val
		},
		navigator(i,item){
			uni.navigateTo({
				url:'/pagesB/facilities/index?date='+ encodeURIComponent(JSON.stringify(item))+'&title='+i.title
			})
		},
		handleCar() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return uni.navigateTo({ url: '/pagesB/login/login' })
			}
			const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, product_id: this.detailId, type: this.product_type }
			this.addCard(data).then(res => {
				uni.showToast({
					title: '添加成功'
				})
			})
		},
		handleShop() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return uni.navigateTo({ url: '/pagesB/login/login' })
			}
			uni.navigateTo({
				url: '/pagesB/shopCar/pay?order_type=' + 2 + '&product_id=' + this.detailId + '&product_type=' + this.product_type
			})
		},
		submit() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return;
			}
			if (!typeof (parseInt(this.scores))) {
				uni.showToast({
					title: '请评价',
					icon: 'none'
				})
				return
			}
			if (!this.productValue.trim()) {
				uni.showToast({
					title: '请填写评价内容',
					icon: 'none'
				})
				return
			}
			if (this.productValue.trim().length < 6) {
				uni.showToast({
					title: '评论内容不能少于6个字',
					icon: 'none'
				})
				return
			}

			console.log('467', this.fileImg)
			if (this.isSubmit) {
				return
			}
			// fileImg
			this.isSubmit = true
			let data = {
				token: this.userInfo.token,
				url: '/place/' + this.details.id,
				score: this.scores,
				content: this.productValue, //   **** 
				img_arr: this.fileImg
			}
			this.addComent(data).then(res => {
				console.log('提交')
				uni.showToast({
					title: '评价成功'
				})
			}).catch(err => {
				this.isSubmit = false
			})
		},
		productDetail(item) {
			uni.navigateTo({
				url: `/pagesA/detail/product?id=${item.id}`
			})
		},
		// 查看视频
		viewVideo(item) {
			let json = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pages/videoList/detail?params=${json}`
			})
		},
		// refresh 
		refreshPage(id) {
			// uni.redirectTo({
			// 	url:'/pagesA/detail/place'
			// })
			this.navIndex = 0
			this.AsideIndex = 0
			this.getPlaceDetail(id)
			uni.pageScrollTo({
				scrollTop: 0
			})
		},
		toIndex() {
			uni.redirectTo({
				url: '/pages/home/home'
			})
		},
		// siteSetting
		async siteSetting() {
			return await siteSetting()
		},
		// addComent
		async addComent(data) {
			return await addComent(data)
		},
		async addCollection(data) {
			return await addCollection(data)
		},
		// getTalk
		async getTalk(data) {
			return await getTalk(data)
		},
		collected() {
			if (!this.userInfo) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							})
						}
					}
				})
			} else {
				if (!this.collect) {
					let data = {
						token: this.userInfo.token,
						id: this.details.id,
						category_id: this.details.category_id
					}
					this.addCollection(data).then(res => {
						this.collect = true
					}).catch(err => {

					})
				}
			}
		},
		orderSource() {
			uni.navigateTo({
				url: '/pagesA/need/need?id=6'
			})

		},
		makeCall() {
			uni.makePhoneCall({
				phoneNumber: '13022861002'
			})
		},
		selectTime() {
			console.log('选择时间')
			this.show2 = true
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		cancelOver() {
			this.show = false
		},
		confirm(val) {
			let time = this.formData(val.value)
			console.log('选择时间', time)
			this.end_date = time
			this.inputTime = time

		},
		formData(val) {
			let date = new Date(val)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let h = date.getHours()
			let m = date.getMinutes()
			let s = date.getSeconds()
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			if (h < 10) {
				h = '0' + h
			}
			if (m < 10) {
				m = '0' + m
			}
			if (s < 10) {
				s = '0' + s
			}
			return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s
		},
		cancel() {
			this.show2 = false
		},
		// productSharedata
		async productSharedata(data) {
			return await productSharedata(data)
		},
		sureOver() {
			// return 
			let shareInfo = []
			this.details.costList.forEach((val, index) => {
				val.child.forEach((item, i) => {
					shareInfo.push({
						cost_listing_id: item.id,
						number: item.number_between,
						day_number: item.day_between
					})
				})
			})
			let data = {
				token: JSON.parse(uni.getStorageSync('userInfo')).token,
				name: JSON.parse(uni.getStorageSync('userInfo')).nickName,
				phone: uni.getStorageSync('phone'),
				end_date: this.end_date,
				descr: this.noticeVal,
				url: '/place',
				id: this.details.id,
				cat_id: this.details.category_id,
				content_title: this.details.title,
				shareData: shareInfo
			}
			this.productSharedata(data).then(res => {
				console.log(res)
				this.show = false
			})
		},
		shareData() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return;
			}
			this.show = true
			let date = new Date()

			this.inputTime = this.formData(date.getTime())
			this.end_date = this.formData(date.getTime())
		},

		cont(val1, val2, val3) {
			// console.log(val1,val2,val3)
			if (parseInt(val1) && parseInt(val2) && parseInt(val3)) {
				// console.log('总数',parseInt(val1)*parseInt(val2)*parseInt(val3))
				return parseInt(val1) * parseInt(val2) * parseInt(val3)
			} else {
				return 0;
			}
		},
		changeNum() {
			// console.log(123)
		},


		showMore() {
			this.moreInfo = !this.moreInfo
		},
		async getplaceDetail(data) {
			return await getplaceDetail(data)
		},
		getPlaceDetail(id) {
			let data = {
				id
			}
			this.getplaceDetail(data).then(res => {

				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: res.title // 自定义标题内容
				})
				this.details = res
				this.banner = []
				res.img_arr.forEach(val => {
					// this.banner.push(this.showImg+val.img)
					this.banner.push({
						image: this.showImg + val.img,
						title: val.title
					})
					// console.log('当前轮播图',this.banner)
				})
				res.placeCase == "" ? this.kh_onOff = 0 : this.khArr = res.placeCase;

				console.log("this.khArr", this.khArr)
				setTimeout(() => {
					this.getOffsetTop('#g1', 0);
					this.getOffsetTop('#g2', 1);
					this.getOffsetTop('#g3', 2);
					this.getOffsetTop('#g4', 3);
					this.getOffsetTop('#g5', 4);
				}, 1000)

				console.log('详情res', res)
				let newLocation = res.location.split(',')
				var that = this;
				// 新建百度地图对象 
				let param = {
					url: '/place/' + id,
					p: 0,
					n: 20
				}
				this.getTalk(param).then(result => {
					console.log('result', result)
					if (result.list && result.list.length > 0) {
						this.talkList = result.list
					}
				}).catch(error => {
					console.log('error', error)
				})

			}).catch(err => {
				console.log(err)
			})
		},
		toDetail(item) {
			uni.navigateTo({
				url: `/pagesA/detail/case?id=${item.id}`
			})
		},
		navClick(index) {
			if (this.navIndex != index) {
				this.navIndex = index
				if (index == 0) {
					this.setPageScroll(this.g1)
					this.navType = 'v0'
				} else if (index == 1) {
					this.setPageScroll(this.g2)
					this.navType = 'v1'
				} else if (index == 2) {
					this.setPageScroll(this.g3)
					this.navType = 'v2'
				} else if (index == 3) {
					this.setPageScroll(this.g4)
					this.navType = 'v3'
				} else if (index == 4) {
					this.setPageScroll(this.g5)
					this.navType = 'v4'
				}
				// else{
				// 	this.setPageScroll(this.g6) 
				// 	this.navType='v5'
				// } 
			}
		},
		valuteClick(item, index) {
			if (!this.rateList[index].check) {
				this.rateList.forEach(val => {
					if (val.check) {
						val.check = false
					}
				})
				this.rateList[index].check = true
				this.scores = index
			}
		},

		afterRead(event) {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return;
			}
			if (this.isSubmit) {
				return
			}
			const {
				file
			} = event.detail;
			let picNum = 0
			let token = JSON.parse(uni.getStorageSync('userInfo')).token
			uni.showLoading({
				title: '上传中...'
			})
			let t = this
			console.log('获取的图片', file)
			// return
			file.forEach((val, index) => {
				picNum++
				// 当设置 mutiple 为 true 时, file    为数组格式，否则为对象格式
				uni.uploadFile({
					url: t.$config.upLoadApi + 'file/imageUpload', // 接口地址
					filePath: val.url,
					name: 'file',
					formData: {
						file: val.url,
						token: token
					},
					success: (res) => {
						let fileInfo = JSON.parse(res.data)
						console.log('fileInfo', fileInfo)
						if (fileInfo['code'] == 403) {
							uni.showToast({
								title: fileInfo.msg,
								icon: 'none'
							})
						}
						if (fileInfo.path) {
							t.fileList.push({
								url: this.showImg + fileInfo.path,
								name: '图片'
							})
							t.fileImg.push(fileInfo.path)
						}
						console.log('imglist', t.fileImg)
						picNum--
						if (picNum == 0) {
							uni.hideLoading()
						}
					},
				});
			})


		},

		delImg(val) {
			console.log('删除', val)
			this.fileList.splice(val.target.index, 1)
			this.fileImg.splice(val.target.index, 1)
		},


		setPageScroll(distance) {
			uni.pageScrollTo({
				scrollTop: distance - 50,
				duration: 500
			})
		},
		getOffsetTop(id, index) {
			const query = uni.createSelectorQuery().in(this);
			const t = this;
			query.select(id).boundingClientRect(data => {
				if (!data) return;
				switch (index) {
					case 0:
						t.g1 = data.top;
						break;
					case 1:
						t.g2 = data.top;
						break;
					case 2:
						t.g3 = data.top;
						break;
					case 3:
						t.g4 = data.top;
						break;
					case 4:
						t.g5 = data.top;
						break;
					// case 5:
					// t.g6=data.top;
					// break;
				}
			}).exec();
		},

	},
	mounted() { },
	onLoad(option) {
		if (option.scene) {
			const detailId = decodeURIComponent(option.scene);
			this.detailId = detailId.split('=')[1]
		} else {
			this.detailId = option.id
		}
		this.getPlaceDetail(this.detailId);
		this.showImg = this.$config.showImgApi;
		this.siteSetting().then(res => {
			// this.score_option=res.score_option
			for (let obj in res.score_option) {
				this.rateList.push({
					text: res.score_option[obj],
					check: false
				})
			}
		})
	},
	onShow() {
		if (uni.getStorageSync('goods')) {
			this.keyword = JSON.parse(uni.getStorageSync('goods'))[0]
			this.getList()
		}
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
		}
	},
	onPageScroll(e) {


	},

	onShareAppMessage(res) {
		return {
			title: this.details.title,
			path: `/pagesA/detail/place?id=${this.detailId}`,
			imageUrl: this.banner[0].image
		}
	},
	onShareTimeline(res) {
		return {
			title: this.details.title,
			path: `/pagesA/detail/place?id=${this.detailId}`,
			imageUrl: this.banner[0].image
		}
	},
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F5F5F5;
}

.items2 {
	.items2-cc {
		margin-bottom: 26rpx;

		.item2-img {
			width: 100%;
		}

		.items2-title {
			font-size: 26rpx;
			margin-top: 12rpx;
		}

		.item2-tip {
			font-size: 20rpx;
			margin-top: 12rpx;
		}
	}
}

.talkList {
	margin-top: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;

	.talkContent {
		width: 580rpx;
	}

	.talk_img_list {
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: row wrap;

		image {
			width: 290rpx;
			height: 180rpx;
			margin-right: 20rpx;
		}
	}
}

.aboutVideo {
	background-color: #FFFFFF;
	padding: 0 30rpx;

	.aboutCate {
		font-size: 30rpx;
		text-align: center;
		font-weight: bolder;
		line-height: 70rpx;
	}

	.about_item {
		text-align: center;
		margin-bottom: 20rpx;

		image {
			width: 690rpx;
			height: 440rpx;
		}

		.about_txt {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
			font-size: 34rpx;
			line-height: 60rpx;
		}
	}
}

.rect {
	width: 80%;
	position: absolute;
	top: 40%;
	right: 0;
	// bottom: 0;
	left: 0;
	margin: auto;
	background-color: #FFFFFF;
	padding: 30rpx;
	border-radius: 10rpx;

	.shareItem {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: row nowrap;
		margin-bottom: 30rpx;

		.txt {
			width: 180rpx;
		}
	}

	.overBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row nowrap;

		// text{
		// 	font-size: 24rpx;
		// 	margin: 0 20rpx;
		// }
		.u-button {
			width: 30%;
			margin: 0 20rpx;
		}
	}
}

.nav_head {
	display: flex;
	width: 100%;

	.nav_title {
		flex: 1;
		text-align: center;
		line-height: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 34rpx;
		// color: #FFB850;
	}

	.nav_title:nth-child(1) {
		border-right: 1px solid #FF8000;
		border-bottom: 1px solid #C0C0C0;
	}

	.nav_title:nth-child(2) {
		border-bottom: 1px solid #C0C0C0;
	}

	.nav_title.current {
		border-bottom-color: #FF8000;
		color: #FF8000;
	}
}

.indicator-num {
	padding: 4rpx 18rpx 6rpx;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 22rpx;
	width: 80rpx;
	@include flex;
	justify-content: center;

	&__text {
		color: #FFFFFF;
		font-size: 26rpx;
	}
}

.info {
	padding: 30rpx 30rpx 16rpx;
	background-color: #FFFFFF;

	.collect {
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #F5F5F5;
		@include flex_style(space-between, center, row nowrap);

		.left {
			@include flex_style(flex-start, flex-start, column nowrap);

			.title {
				margin-bottom: 12rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 56rpx;
				color: #1A1A1A;
			}

			.rate {
				@include flex_style(flex-start, center, row nowrap);

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #666666;
				}
			}
		}

		.right {
			@include flex_style(flex-start, flex-start, column nowrap);

			image {
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 18rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}
	}

	.system {
		border-top: 1px solid #C0C0C0;
		border-bottom: 1px solid #C0C0C0;
		padding: 12rpx 18rpx;
		// border-bottom: 2rpx solid #F5F5F5;
		@include flex_style(space-between, center, row nowrap);

		.item {
			@include flex_style(flex-start, center, column nowrap);

			text:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
				margin-bottom: 16rpx;
			}

			text:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #FF6F00;
			}
		}
	}

	.number {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #1A1A1A;
		margin-top: 30rpx;
	}

	.address {
		margin-top: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #1A1A1A;
	}

	.path {
		margin-top: 24rpx;
		@include flex_style(space-between, center, row nowrap);
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #1A1A1A;

		text {
			color: #FF6F00;
		}
	}

	.special {
		margin-top: 24rpx;
		@include flex_style(flex-start, flex-start, row nowrap);

		.tit {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #1A1A1A;
			white-space: nowrap;
		}

		.dis {
			height: 60rpx;
			overflow: hidden;
		}

		.cont {
			@include flex_style(flex-start, center, row wrap);

			text {
				padding: 0 20rpx;
				line-height: 48rpx;
				margin-right: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background-color: #FFB850;
				margin-bottom: 16rpx;
			}
		}
	}
}

.write {
	background-color: #FFFFFF;
	margin: 16rpx 0;
	padding: 32rpx 40rpx 32rpx 60rpx;
	@include flex_style(space-between, center, row nowrap);

	.text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		color: #666666;
	}

	.btn {
		width: 240rpx;
		height: 72rpx;
		background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
		opacity: 0.92;
		border-radius: 36px;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
}

.content {
	background-color: #FFFFFF;
	padding: 0 0 64rpx 30rpx;

	.wraps {
		padding-left: 30rpx;
		padding-top: 30rpx;
		@include flex_style(flex-start, center, row nowrap);
		white-space: nowrap;
		border-bottom: 2rpx solid #F5F5F5;

		.item {
			@include flex_style(flex-start, center, column nowrap);
			margin-right: 54rpx;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #666666;
			}

			.line {
				width: 120rpx;
				height: 8rpx;
				margin-top: 22rpx;
				background-color: #FFFFFF;
			}
		}

		.active {
			text {
				font-size: 30rpx;
				font-weight: bold;
			}

			.line {
				background-color: #FFB850;
			}
		}
	}

	.items1 {
		margin-top: 48rpx;

		.titleName {
			@include flex_style(center, center, row nowrap);
			margin-bottom: 34rpx;

			image {
				width: 288rpx;
				height: 44rpx;
			}
		}

		scroll-view {
			.wrap {
				@include flex_style(flex-start, center, row nowrap);
				white-space: nowrap;

				.item {
					width: 316rpx;
					background: rgba(255, 255, 255, 0.39);
					box-shadow: 0px 6rpx 20rpx rgba(155, 155, 155, 0.24);
					border-radius: 8rpx;
					margin-right: 24rpx;

					.img {
						position: relative;
						margin-bottom: 12rpx;

						image {
							width: 316rpx;
							height: 192rpx;
						}

						text {
							display: inline-block;
							padding: 0 8rpx;
							line-height: 40rpx;
							background: linear-gradient(150deg, #FFB850 0%, #FFAB2C 100%);
							opacity: 0.9;
							border-radius: 8rpx 0px 8rpx 0px;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 20;
							font-size: 22rpx;
							font-family: 苹方-简;
							font-weight: normal;
							color: #FFFFFF;
						}
					}

					.goods_tit {
						width: 276rpx;
						height: 72rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #1A1A1A;
						@include word_over(2);
						white-space: normal;
						margin: 0 auto 8rpx;
					}

					.notice {
						padding: 0 20rpx;
						margin-bottom: 6rpx;
						@include flex_style(flex-start, center, row nowrap);

						text {
							font-size: 22rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 30rpx;
							color: #888888;
						}
					}

					.price {
						font-size: 20rpx;
						font-family: 苹方-简;
						font-weight: normal;
						line-height: 28rpx;
						color: #888888;
						padding-right: 20rpx;
						padding-bottom: 16rpx;
						text-align: right;

						text {
							font-size: 28rpx;
							line-height: 40rpx;
							color: #FF5E00;
						}
					}
				}
			}
		}
	}

	.items2 {
		margin-top: 48rpx;
		padding-right: 30rpx;

		.titleName {
			@include flex_style(center, center, row nowrap);
			margin-bottom: 34rpx;

			image {
				width: 288rpx;
				height: 44rpx;
			}
		}

		.contain {
			@include flex_style(space-between, center, row wrap);

			image {
				width: 340rpx;
				height: 205rpx;
				margin-bottom: 24rpx;
			}

			rich-text {
				p {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
					color: #1A1A1A;
				}
			}

		}

		.roomList {
			.roomdetail {
				.roomNum {
					@include flex_style(space-between, center, row nowrap);
					margin-bottom: 20rpx;
					margin-top: 32rpx;

					.left {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #FF6F00;
					}

					.right {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #888888;
					}
				}

				.item {
					@include flex_style(space-between, center, row nowrap);

					image {
						width: 240rpx;
						height: 162rpx;
					}

					.roomInfo {
						width: 425rpx;
						height: 162rpx;

						.title {
							@include flex_style(space-between, center, row nowrap);
							margin-bottom: 24rpx;

							text {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: bold;
								line-height: 40rpx;
								color: #1A1A1A;
							}

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}

						.sys {
							height: 84rpx;
							@include flex_style(space-between, center, row wrap);
							align-content: space-between;

							text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 34rpx;
								color: #888888;

								text {
									color: #FF6F00;
								}
							}
						}
					}
				}

				.cs {
					width: 240rpx;
					text-align: center;
					margin-top: 12rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40rpx;
					color: #1A1A1A;
				}
			}
		}

		.aside {
			@include flex_style(space-between, flex-start, row wrap);

			.items {
				flex: 1;
				@include flex_style(flex-start, flex-start, column wrap);

				// margin-right: 100rpx;
				.titName {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 34rpx;
					color: #FFB850;
				}

				.address {
					margin-top: 20rpx;
					@include flex_style(flex-start, center, row nowrap);

					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34rpx;
						color: #1A1A1A;
						padding-left: 10rpx;
					}

					image {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}
		}

		.subTit {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 34rpx;
			color: #FFB850;
		}

		.need {
			@include flex_style(space-between, center, row wrap);

			text {
				margin-top: 20rpx;
				min-width: 340rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #1A1A1A;
			}
		}

		.valute {
			@include flex_style(flex-start, center, row wrap);

			.item {
				@include flex_style(flex-start, center, row wrap);
				margin-right: 72rpx;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
					color: #1A1A1A;
					margin-right: 10rpx;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.valuteContent {
			margin-top: 24rpx;
			border: 2rpx solid #F5F5F5;

			.u-border {
				border: none;
			}

			::v-deep.u-textarea__field {
				min-height: 100rpx !important;
			}

			.upload {
				padding: 0 24rpx;
			}
		}

		.submit {
			width: 320rpx;
			height: 72rpx;
			margin-top: 32rpx;
			text-align: center;
			background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
			opacity: 0.92;
			border-radius: 46rpx;
			line-height: 72rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.map {
			width: 690rpx;
			height: 466rpx;
		}
	}

}

.footer {
	width: 750rpx;
	height: 104rpx;

	.wrap_box {
		border-top: 1px solid #F5F5F5;
		background-color: #FFFFFF;
		padding: 24rpx 0;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding-left: 30rpx;
		@include flex_style(space-between, center, row nowrap);

		.btn-box {
			border-radius: 448rpx;
			height: 76rpx;
			@include flex_style(start, center, row nowrap);
			border-radius: 64rpx;
			overflow: hidden;
			margin-right: 48rpx;

			.btn-box-1 {
				width: 224rpx;
				height: 100%;
				background-color: #333333;
				text-align: center;
				line-height: 76rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.item {
			@include flex_style(center, center, column nowrap);
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #1A1A1A;
			}

			button {
				position: absolute;
				top: 0;
				left: 0;
				width: 88rpx;
				height: 84rpx;
				opacity: 0;
			}
		}

		.submit {
			width: 270rpx;
			height: 104rpx;
			background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
			line-height: 104rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}

.more {
	font-size: 24rpx;
	color: #FFB850;
	white-space: nowrap;
}

.table {
	background-color: #FFFFFF;
	padding: 10rpx;
	margin: 10rpx auto;

	.ul {
		.li {
			margin-bottom: 20rpx;

			.title {
				text-align: center;
			}

			.navList {
				background-color: #CCCCCC;
				margin-bottom: 10rpx;

				text {
					text-align: center;
					display: block;
					// width: 20%; 
					// font-size: 28rpx;
					font-size: 24rpx;
				}
			}

			.tip,
			.navList {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-flow: row nowrap;
			}

			.item {
				.tip {
					display: inline-block;
					vertical-align: middle;
					height: 66rpx;

					// .u-number-box{
					// display: inline-block;
					// 	vertical-align: middle;
					// }
					text {
						display: inline-block;
						vertical-align: middle;
					}
				}
			}

			.tip {
				text-align: center;
				justify-content: center;
				font-size: 20rpx;
			}

			.item {
				.tip {

					// width: 22%;
					.tit {
						// width: 160rpx!important;

					}
				}
			}

			.tip {

				// font-size: 26rpx;
				.u-number-box__plus {
					width: 40rpx !important;
					// display: none!important;
					background-color: #F7F7F7 !important;
				}

				.u-number-box__minus {
					width: 40rpx !important;
					// display: none!important;
					background-color: #F7F7F7 !important;
				}

				.u-number-box__input {
					background-color: #FFFFFF !important;
					// border-bottom: 1rpx solid #C8C7CC;
					height: 52rpx;
				}

				.u-icon__icon {
					font-size: 18rpx !important;
				}

				.u-number-box {
					height: 100%;
				}

			}
		}
	}
}

.center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.cd_small,
.cd_big {
	display: inline-block;
	vertical-align: middle;
	width: 12rpx;
	height: 12rpx;
	border-radius: 100%;
	background-color: #FFAB2C;
}

.cd_big {
	width: 20rpx;
	height: 20rpx;
	margin: 0 20rpx;
}

.cd_text {
	font-weight: 550;
	color: #545353;
	font-size: 30rpx;
	letter-spacing: 2rpx;
	text-shadow: 0px 0px 1.5rpx #999;
}

.cd_content {
	.cd_listBox {
		margin: 40rpx 0;
		display: flex;

		image {
			flex-shrink: 0;
			width: 256rpx;
			height: 208rpx;
			border-radius: 8rpx;
			margin-right: 30rpx;
		}

		.cd_listBox_text {

			.cd_listBox_textTitle {
				max-height: 76rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 38rpx;
				color: #1A1A1A;
				margin-bottom: 25rpx;
			}

			.cd_listBox_cont {
				max-height: 150rpx;
				line-height: 38rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				font-size: 24rpx;
				color: #1A1A1A;
				font-family: PingFang SC;
				font-weight: 400;
			}

		}

	}

}

._root {
	width: 700rpx !important;
}

.u-empty {
	margin: auto;
}
</style>